<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*  使用ajax发送请求  */
    function ajax(url) {
        const xhr = new XMLHttpRequest();
        xhr.open("get", url, false);
        xhr.onreadystatechange = function () {
            // 异步回调函数
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    document.write("ajax响应结果:" + xhr.response)

                }
            }
        }
        xhr.send(null);
    }

    ajax('https://smallpig.site/api/category/getCategory')

    /* fetch  */
    function ajaxFetch(url) {
        fetch(url).then(res => res.json()).then(data => {
            console.info('fetch响应结果:',data)
        })
    }

    ajaxFetch('https://smallpig.site/api/category/getCategory')

    /* axios */
    /*axios({
        method: 'post',
        url: '/user/12345',
        data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        }
    })*/

    /**
     * ajax 是一种思想，基于XHR实现的发起请求
     * fetch 仅仅是基于Promise的一个API
     * axios 对XHR进行了二次封装，会返回一个promise对象；和Vue的关系密切
     *
     *
     * fetch和axios
     * fetch是浏览器原生的API（传两个参数，请求url和参数）
     * axios是封装过的，需要引入axios库（传一个对象，包含请求的url，方法和参数）
     */

</script>
</body>
</html>
